<style scoped>
.alarm-detail-item {
  margin: 10px;
}
.group-detail-item {
  line-height: 30px;
}
.ivu-modal-body {
  background-color: #efefef !important;
}
</style>

<template>

  <div>

    <Modal
      v-model="IsModalShow"
      :title="modalFormTitle"
      :mask-closable="false"
      @on-cancel="cancel"
      width="1200"
    >
      <Row>
        <Col
          span="16"
          style="padding-right:20px"
        >
        <Row style="padding-bottom:20px">
          <Card>
            <p slot="title">
              <Icon type="ios-bell"></Icon>
              告警详情
            </p>
            <div style="padding:10px 0;">
              <span class="alarm-detail-item">告警类别：<span :style="{'color': alarmTypeColor}">{{alarmTypeTxt}}</span></span>
              <span class="alarm-detail-item">告警时间:{{modalForm.alarmDate}}</span>
              <span class="alarm-detail-item">告警内容:{{modalForm.alarmDetail}}</span>
              <span class="alarm-detail-item">告警状态：<span :style="{'color':alarmStatColor}">{{alarmStatTxt}}</span></span>
            </div>
          </Card>
        </Row>
        <Row>
          <Card>
            <p slot="title">
              <Icon type="ios-compose"></Icon>
              告警处理
            </p>
            <div>
              <Form
                ref="modalForm"
                :model="modalForm"
                :label-width="80"
                value=true
                style="padding: 3px 10px"
              >
                <Form-item
                  label="辅助功能"
                  prop="managerMobile"
                >
                  <Button
                    type="success"
                    @click="deviceXY"
                  >消音</Button>
                </Form-item>
                <Form-item
                  label="确认类型"
                  prop="dealType"
                  :rules="{required: true, type: 'number',message: '必选',trigger:'blur'}"
                >
                  <RadioGroup v-model="modalForm.dealType">
                    <Radio
                      v-for="item in dealTypeCombo"
                      :key="item.key"
                      :label="item.key"
                      :disabled="modalForm.alarmStat==2&&modalForm.dealMethod!=item.key"
                    >{{item.value}}</Radio>
                  </RadioGroup>
                </Form-item>
                <Form-item
                  label="确认方式"
                  prop="dealMethod"
                  :rules="{required: true, type: 'number',message: '必选', trigger:'blur'}"
                >
                  <RadioGroup v-model="modalForm.dealMethod">
                    <Radio
                      v-for="item in dealMethodCombo"
                      :key="item.key"
                      :label="item.key"
                      :disabled="modalForm.alarmStat==2&&modalForm.dealMethod!=item.key"
                    >{{item.value}}</Radio>
                  </RadioGroup>
                </Form-item>
                <Form-item label="处理结果">
                  <Input
                    v-model="modalForm.dealResult"
                    :disabled="modalForm.alarmStat==2"
                  ></Input>
                </Form-item>
              </Form>
            </div>
          </Card>
        </Row>
        </Col>
        <Col span="8">
        <Card style="height:409px;">
          <p slot="title">
            联网单位信息
          </p>
          <div>
            <Row class="group-detail-item">
              <Col span="7">
              联网单位名称:
              </Col>
              <Col span="17">
              {{modalForm.groupName}}
              </Col>
            </Row>
            <Row class="group-detail-item">
              <Col span="7">主要联系人:
              </Col>
              <Col span="17">
              {{modalForm.managerName}}
              </Col>
            </Row>
            <Row class="group-detail-item">
              <Col span="7">手机号:
              </Col>
              <Col span="17">
              {{modalForm.managerMobile}}
              </Col>
            </Row>
          </div>
          <Row style="height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #1c2438;
    font-weight: 700;margin:20px 0 5px;">
            <Col span="7">
            设备信息
            </Col>
            <Col span="17">
            </Col>
          </Row>
          <div>
            <Row class="group-detail-item">
              <Col span="7">
              设备名称:
              </Col>
              <Col span="17">
              {{modalForm.devName}}
              </Col>
            </Row>
            <Row class="group-detail-item">
              <Col span="7">IMEI:
              </Col>
              <Col span="17">
              {{modalForm.imei}}
              </Col>
            </Row>
            <Row class="group-detail-item">
              <Col span="7">安装地址:
              </Col>
              <Col span="17">
              {{modalForm.bdAddr}}
              </Col>
            </Row>
          </div>
        </Card>
        </Col>
      </Row>
      <div slot="footer">
        <Button
          type="ghost"
          @click="cancel"
        >关闭</Button>
        <Button
          v-if="modalForm.alarmStat==1"
          type="primary"
          :loading="modalForm_loading"
          @click="saveForm('modalForm')"
        >确认告警</Button>
      </div>
    </Modal>
  </div>

</template>

<script>
import { saveAlarm, alarmXY } from "@/api/getData";
export default {
  props: {
    parentForm: {
      type: Object,
      default: function() {
        return {
          id: "",
          devId: "",
          dealType: "",
          dealMethod: "",
          dealResult: ""
        };
      }
    },
    modalShow: {
      type: Boolean,
      default: true
    },
    modalFormTitle: {
      type: String,
      default: "添加联网单位"
    }
  },
  data() {
    return {
      IsModalShow: false,
      modalForm: {},
      modalForm_loading: false,
      dealTypeCombo: [
        { key: 1, value: "真实火警" },
        { key: 2, value: "误报" },
        { key: 3, value: "故障" },
        { key: 4, value: "测试" }
      ],
      dealMethodCombo: [
        { key: 1, value: "电话确认" },
        { key: 2, value: "视频确认" },
        { key: 3, value: "app图片确认" },
        { key: 4, value: "自动确认" },
        { key: 5, value: "其他方式" }
      ],
    alarmTypeCombo: [
        { key: 0, value: "告警类型" },
        { key: 1, value: "预警" },
        { key: 2, value: "火警" },
        { key: 3, value: "故障" },
        { key: 4, value: "拆除报警" },
        { key: 5, value: "其他" }
      ],
      alarmTypeColorList: [
        { key: 0, value: "#495060" },
        { key: 1, value: "#f16700" },
        { key: 2, value: "#e4393c" },
        { key: 3, value: "#00b711" },
        { key: 4, value: "#d3adf7" },
        { key: 5, value: "#495060" }
      ],
      alarmStatCombo: [
        { key: 0, value: "确认状态" },
        { key: 1, value: "未确认" },
        { key: 2, value: "已确认" }
      ],
      alarmStatColorList: [
        { key: 1, value: "#f54d50" },
        { key: 2, value: "#5cb85c" }
      ]
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      this.modalForm = Object.assign(this.parentForm);
      this.IsModalShow = curVal;
    }
  },
  computed: {
    alarmStatTxt: function() {
      if (this.modalForm.alarmStat) {
        let alarmStat = this.modalForm.alarmStat;
        return this.alarmStatCombo.find(a => a.key == alarmStat).value;
      } else {
        return "";
      }
    },
    alarmStatColor: function() {
      if (this.modalForm.alarmStat) {
        let alarmStat = this.modalForm.alarmStat;
        return this.alarmStatColorList.find(a => a.key == alarmStat).value;
      } else {
        return "#666";
      }
    },
    alarmTypeTxt: function() {
      if (this.modalForm.alarmStat) {
        let alarmType = this.modalForm.alarmType;
        return this.alarmTypeCombo.find(a => a.key == alarmType).value;
      } else {
        return "";
      }
    },
    alarmTypeColor: function() {
      if (this.modalForm.alarmStat) {
        let alarmType = this.modalForm.alarmType;
        return this.alarmTypeColorList.find(a => a.key == alarmType).value;
      } else {
        return "#666";
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    cancel() {
      this.$emit("listenModalForm");
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.modalForm_loading = true;
          let params = Object.assign(this.modalForm);
          params.alarmTime = params.alarmDate;
          params.alarmStat = 2; //表示确认
          try {
            let result = await saveAlarm(params);
            if (result.code == 0) {
              this.$Message.success("提交成功");
              this.$emit("listenModalForm");
              this.$emit("refreshTableList");
            }
          } catch (err) {
            console.log(err);
            this.$Message.error("服务器异常，稍后再试");
          }
          this.modalForm_loading = false;
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    async deviceXY() {
      console.log(this.parentForm);
      const result = await alarmXY({ deviceId: this.parentForm.devId });
      console.log(result);
      if (result.code == "0") {
        this.$Message.success("消音成功。");
      } else {
        this.$Message.error("消音失败。");
      }
    }
  }
};
</script>
